<template>
	<view class="visit">
		
		<view style="display: flex;padding:5px;flex-direction: row;align-items:center;justify-content: center;background-color: #f5faf9;">
			<view class="t1" style="flex: 1;text-align: right;font-size: 18px;">
				已完成：<span style="color:#0fb88d">{{finished}}</span>户
			</view>
			<view style="flex: 1;text-align: center;font-size: 18px;">
				未完成：<span style="color:#fe573d">{{unFinished}}</span>户
			</view>
			<view style="flex: 1;text-align: left;font-size: 18px;color: #68caac;" @click="gotoHZ">
				查看汇总：
				<view style="display: inline-block; width: 15px; height: 15px;background-size:contain; background-image: url(../../static/right_icon.png);" ></view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;background-color: white;padding: 10px;" >
			<view style="flex: 3;display: flex;text-align: center;">
				<view style="height: 30px;line-height: 30px;font-size: 1px;">
					走访日期
				</view>
				<view class="button1" style="font-size: 12px;height: 30px;line-height: 30px;" @tap="showTimePicker">{{selectDate}}
					<view style="width: 15px; height: 15px;background-size:contain; background-image: url(../../static/button1_bottom.png);" ></view>		
				</view>
				
			</view>
			<view style="flex: 2;display: flex;">
				<view style="height: 30px;line-height: 30px;">
					类型
				</view>
				<view class="button1" style="height: 30px;line-height: 30px;" @tap="showTypePicker">
					已走访
					<view style="width: 15px; height: 15px;line-height: 20px;background-size:contain; background-image: url(../../static/button1_bottom.png);" ></view>
				</view>
				
			</view>
			
			<view style="flex: 1;">
					<u-button type="success" size="mini" shape="circle" @click="search" >查询</u-button>
			</view>
			
		</view>
		<view class="uni-list">
			
			<u-empty text="数据为空" v-if="visits.length==0" mode="list"></u-empty>
			
			<view v-else class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in visits" :key="index" @tap="showPicker">
				<view class="uni-media-list">
					
					<view  style="display: flex;flex-direction: row;width: 100%;" @tap="navTo('/pages/plans/detail')">
						
						<view class="uni-media-list-body" style="width: 95%;">
							<view class="uni-media-list-text-top" style="display: flex;justify-content: space-between;flex-wrap:wrap;">
									<view class="fitem">
										张三
									</view>
									<view class="fitem">
										已走访
									</view>
							</view>
							<view class="uni-media-list-text-bottom">
								<text>33333333</text>
								<text>{{item.created_at | time}}</text>
							</view>
						</view>
						<view style="width: 5%;">
							
								<view  class="righticon" ></view>
						</view>
						
					</view>
					
				</view>
			</view>
			
			
			
		</view>
		
		<u-picker v-model="show" mode="time" @confirm="onchangeDate"></u-picker>
		
		<u-picker mode="selector" :range="columns" v-model="typeShow" range-key="label"  @confirm="onchangeState"></u-picker>
		
	</view>

</template>

<script>

	import moment from '@/common/moment';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {http} from '@/utils/request/index.js';
	export default {
		data() {
			return {
				loadingsearch:false,
				show:false,
				visits:[],
				typeShow:false,
				finished:0,
				pageNumber:0,
				unFinished:0,
				selector: [1, 2, 3],
				searchForm:{
					pageSize:10,
					pageNumber:1
				},
				columns: [
					{
				       label: '已走访',
				       id: 1
				     }, {
				       label: '未走访',
				        id: 0
				    }
				 ],
				selectDate:"",
				studyList: [{"id":"8","merchant_id":"2","title":"共创人类发展的美好未来","cover":"http://wephp-oa.oss-cn-shenzhen.aliyuncs.com/images/2020/09/10/image_1599669475_VQXiR1bX.jpg","seo_key":"","seo_content":"","cate_id":"1","description":"“十三五”期间，中国不断扩大开放，深入推进共建“一带一路”，构建人类命运共同体共识不断巩固，务实合作根基不断夯实，全球治理空间不断拓展。","position":"0","content":"","link":"","author":"","view":"473","sort":"0","status":"1","created_at":"1601956562","updated_at":"1601956617"},{"id":"7","merchant_id":"2","title":"办公系统正式开通","cover":"http://wephp-oa.oss-cn-shenzhen.aliyuncs.com/images/2020/09/10/image_1599669347_KbFsxS3m.jpg","seo_key":"","seo_content":"","cate_id":"1","description":"办公系统正式开通，请大家下载安装应用","position":"0","content":"","link":"","author":"维博网络","view":"473","sort":"0","status":"1","created_at":"1601915568","updated_at":"1606156145"}],
				// 控制滑动效果
				theIndex: null,
				oldIndex: null
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		filters: {
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:MM');
			},
		},

		async onLoad(options) {
			this.searchForm.slsmanCode = this.userInfo.username
			this.searchForm.visitDate = moment().format('YYYY-MM-DD 00:00:00')
			await this.initData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.searchForm.page = 1;
			this.visits = [];
			uni.showLoading({
				
			})
			this.loadData('refresh');
		},
		methods: {
			gotoHZ(){
				uni.navigateTo({
					url:"/pages/plans/tongji"
				})
			},
			search(){
				uni.showLoading({
					
				})
				
				this.loadData()
				
			},
			onchangeDate(e){
				console.log("onchangeDate",e[0])
				this.selectDate = moment(e.timestamp).format('YYYY年MM月DD');
				this.searchForm.visitDate = e.year+"-"+e.month+"-"+e.day+" 00:00:00"
				this.searchForm.ifAccomplish = e[0]
				this.loadData()
			},
			onchangeState(e){
				console.log("onchangeState",e)
				this.loadData()
			},
			onchangeStatus(e){
				console.log("onchangeStatus",e)
			},
			showTimePicker(){
				this.show=true
			},
			showTypePicker(){
				this.typeShow=true
			},
			tongji(date){
				http.get("oaPlanExecute/completeData",{
					slsmanCode:this.userInfo.username,
					date: date,
				}).then(res=>{
						this.finished = res.result.finished
						this.unFinished= res.result.unFinished
				})
				
				
			},
			async loadData(type) {
				
				
				await http.get("oaPlanExecute/getByCondition",this.searchForm).then(r=>{
					 uni.hideLoading()
					 if(res.success){
						 this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						 this.visits = [...this.visits, ...r.data];
					 }	
					 
					 if (type === 'refresh') {
					 	uni.stopPullDownRefresh();
					 }
					 
				}).catch(() => {
						uni.hideLoading()
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			
	
			// 数据初始化
			initData() {
				
				this.tongji(moment().format('YYYY-MM-DD 00:00:00'))
				this.loadData()
				this.selectDate = moment().format('YYYY年MM月DD');
				this.hasLogin = this.$mStore.getters.hasLogin;
				// uni.setNavigationBarColor({
				// 	frontColor: '#ffffff',
				// 	backgroundColor: this.themeColor.color,
				// 	animation: {
				// 		duration: 400,
				// 		timingFunc: 'easeIn'
				// 	}
				// });

			},
			
			navTo(route) {
				this.$mRouter.push({
					route
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: $page-color-base;
	}
	.righticon{
		width: 15px; 
		height: 15px;
		background-size:contain; 
		background-image: url(../../static/right_icon.png);
		top: 50%; 
		right: 0px;
		transform: translateX(-50%) translateY(-50%);
		position: absolute;
	}
	.fitem{
		border-radius:10rpx;
		text-align: center;
		line-height:40rpx;  
		font-size: 15px;
		font-weight: 500;
	}
	.uni-list::before{
		    background-color: #c8c7cc5c;
	}
	.uni-list-cell::after{
		 background-color: #c8c7cc5c;
	}
	.uni-list-cell{
		
	}
	.button1 {
		display: inline-block;
		height: 45px;
		border-radius: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;height: 20px;line-height: 20px;padding: 2px 6px;background-color: #f5faf9;border: none;
	}

	.visit {
		.uni-media-list-logo {
			width: 180rpx;
			height: 140rpx;
		}

		.uni-media-list-body {
			height: auto;
			justify-content: space-around;
		}

		.uni-media-list-text-top {
			height: 74rpx;
			font-size: 28rpx;
			overflow: hidden;
		}

		.uni-media-list-text-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.add-round {
			position: fixed;
			z-index: 999;
			right: 30rpx;
			bottom: 30rpx;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			font-weight: 100;
			font-size: 80rpx;
		}

		.notify-list {
			margin-top: 20upx;

			.read {
				text-align: right;
				margin-right: $spacing-base;
				margin-top: $spacing-base;
				margin-bottom: $spacing-sm;

				text {
					margin-left: $spacing-base;
				}
			}

			.row {
				width: calc(94%);
				height: calc(22vw + 40upx);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;

				.menu {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}

					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-30%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.open {
						animation: showMenu 0.25s linear both;
					}

					&.close {
						animation: closeMenu 0.15s linear both;
					}

					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.notify-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base $spacing-lg;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;

				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}

				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;
				}

				.time {
					font-size: $font-base;
					color: $font-color-light;
				}

				.type {
					position: absolute;
					top: 26upx;
					left: -10upx;
					border: none;
					font-size: $font-sm;
					opacity: 0.8;
				}

				.un-read {
					display: inline-block;
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					position: absolute;
					top: 32upx;
					right: 30upx;
				}
			}
		}

		.notify-empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.iconfont {
				font-size: $font-lg + 100upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					margin-left: 16upx;
				}
			}
		}
	}
</style>
